var myZhu = echarts.init(document.getElementById('zhu'));
var myZhu1 = echarts.init(document.getElementById('zhu1'));

var rankEcharts = echarts.init(document.getElementById('brandRank'));
// var colorRankEcharts = echarts.init(document.getElementById('colorRank'));
// var modelRankEcharts = echarts.init(document.getElementById('modelRank'));
// var salesVolumeRankEcharts = echarts.init(document.getElementById('salesVolumeRank'));
// var shopSaleRankEcharts = echarts.init(document.getElementById('shopSaleRank'));
// var priceRankEcharts = echarts.init(document.getElementById('priceRank'));
// var todayMarketStorageEcharts = echarts.init(document.getElementById('todayMarketStorage'));
var brandRankEcharts,colorRankEcharts,modelRankEcharts,salesVolumeRankEcharts,shopSaleRankEcharts,priceRankEcharts,todayMarketStorageEcharts;

     
RankOption = {
   title: {
        // text: '按品牌销量排行榜',
        // subtext: '数据来自网络'
    },
    // tooltip: {
    //     trigger: 'axis',
    //     axisPointer: {
    //         type: 'shadow'
    //     }
    // },
    grid: {
        left: '3%',
        right: '7%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        // show:false,
        type: 'value',
        boundaryGap: [0, 0.01],
        // position:'top'
    },
    yAxis: {
        type: 'category',
        data: ['印尼','美国','印度','中国','世界人口(万)'],
        axisLine:{
          show:false,
        },
        axisTick:{
          show:false,
        }
    },
    series: [
        {
            type: 'bar',
            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        // var colorList = ['#cd5c5c','#ffa500','#40e0d0', '#54b1f9', '#54d0f9'];
                        var colorList = ['#54d0f9','#54b1f9','#40e0d0', '#ffa500', '#cd5c5c'];
                        return colorList[params.dataIndex];
                    },
                    label:{
                      show:true,
                      position:'right',
                      formatter: '{c}辆',
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: [23489, 29034, 104970, 131744, 630230]
        }

    ]
}


rankEcharts.setOption(RankOption);

// 初始 option
optionZhu = {
    // title: {
    //     text: ''
    // },
    tooltip: {},
    // legend: {
    //     data:['销量']
    // },
    xAxis: {
        data: []
    },
    color : ['#cd5c5c','#ffa500','#40e0d0', '#54b1f9', '#54d0f9','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    yAxis: {},
    // series: [{
    //     name: '销量',
    //     type: 'bar',
    //     data: [],

    // }]
    series: [
        {
            type: 'bar',
            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#cd5c5c','#ffa500','#40e0d0', '#54b1f9', '#54d0f9'];
                        // var colorList = ['#54d0f9','#54b1f9','#40e0d0', '#ffa500', '#cd5c5c'];
                        return colorList[params.dataIndex];
                    },
                    label:{
                      show:true,
                      position:'top',
                      formatter: '{c}辆',
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: [23489, 29034, 104970, 131744, 630230]
        }

    ]
};

optionZhu1 = {
    backgroundColor: '#fff',

    // title: {
    //     text: 'Customized Pie',
    //     left: 'center',
    //     top: 0,
    //     textStyle: {
    //         color: '#ccc'
    //     }
    // },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    color : ['#cd5c5c','#ffa500','#40e0d0', '#54b1f9', '#54d0f9','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    // color : ['#54d0f9','#54b1f9','#40e0d0', '#ffa500', '#cd5c5c','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    // visualMap: {
    //     show: false,
    //     min: 80,
    //     max: 600,
    //     inRange: {
    //         colorLightness: [0, 1]
    //     }
    // },
    series : [
        {
            // name:'访问来源',
            type:'pie',
            // radius : '55%',
            // center: ['50%', '50%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:274, name:'联盟广告'},
                {value:235, name:'视频广告'},
                {value:400, name:'搜索引擎'}
            ],
            // .sort(function (a, b) { return a.value - b.value; }),
            // roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: '#333'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#333'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            // itemStyle: {
            //     normal: {
            //         color: '#c23531',
            //         shadowBlur: 200,
            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            // },

            // animationType: 'scale',
            // animationEasing: 'elasticOut',
            // animationDelay: function (idx) {
            //     return Math.random() * 200;
            // }
        }
    ]
};

myZhu.setOption(optionZhu);
myZhu1.setOption(optionZhu1);


// 加载数据
function initBrand(){

	
  $.ajax({
    type: "get",      //data 传送数据类型。post 传递
    dataType: 'json',  // 返回数据的数据类型json
    url: defaultUrl + "/controller/statis/getRankInfo",  // yii 控制器/方法
    cache: false,      
    data: {'marketId': marketId,'userId':userId},  //传送的数据
    error:function(){
       // alert("数据传输错误");
    },success: function (data) {
       console.log(data);
       if (data.code != 1) {
          return false
       }

      var resJson =  data.result;

      var brandRankTitleArr = [];
      var brandRankNumArr = [];
      for (var i = 0; i < resJson.brandRankInfo.length; i++) {
          brandRankTitleArr.push(resJson.brandRankInfo[i].brandName);
          brandRankNumArr.push(resJson.brandRankInfo[i].saleNum);
      }
      console.log(brandRankTitleArr);
      console.log(brandRankNumArr);

      brandRankEcharts = {
        yAxis: {
            data: brandRankTitleArr.reverse()
        },
        series: [{
            data: brandRankNumArr.reverse(),
            itemStyle: {normal:{label:{formatter: '{c}辆'}}}
        }]
      }


      var colorRankTitleArr = [];
      var colorRankNumArr = [];
      for (var i = 0; i < resJson.colorRankInfo.length; i++) {
          colorRankTitleArr.push(resJson.colorRankInfo[i].carColor);
          colorRankNumArr.push(resJson.colorRankInfo[i].saleNum);
      }

      colorRankEcharts = {
        yAxis: {
            data: colorRankTitleArr.reverse()
        },
        series: [{
            data: colorRankNumArr.reverse(),
            itemStyle: {normal:{label:{formatter: '{c}辆'}}}
        }]
      }



      var modelRankTitleArr = [];
      var modelRankNumArr = [];
      for (var i = 0; i < resJson.modelRankInfo.length; i++) {
          modelRankTitleArr.push(resJson.modelRankInfo[i].modelName);
          modelRankNumArr.push(resJson.modelRankInfo[i].saleNum);
      }

      modelRankEcharts = {
        yAxis: {
            data: modelRankTitleArr.reverse()
        },
        series: [{
            data: modelRankNumArr.reverse(),
            itemStyle: {normal:{label:{formatter: '{c}辆'}}}
        }]
      }

      var salesVolumeRankTitleArr = [];
      var salesVolumeRankNumArr = [];
      for (var i = 0; i < resJson.salesVolumeRankInfo.length; i++) {
          salesVolumeRankTitleArr.push(resJson.salesVolumeRankInfo[i].shopName);
          salesVolumeRankNumArr.push((resJson.salesVolumeRankInfo[i].salesVolume/10000).toFixed(2));
      }

      salesVolumeRankEcharts = {
        yAxis: {
            data: salesVolumeRankTitleArr.reverse()
        },
        series: [{
            data: salesVolumeRankNumArr.reverse(),
            itemStyle: {normal:{label:{formatter: '{c}万元'}}}
        }],
      }

      var shopSaleRankTitleArr = [];
      var shopSaleRankNumArr = [];
      for (var i = 0; i < resJson.shopSaleRankInfo.length; i++) {
          shopSaleRankTitleArr.push(resJson.shopSaleRankInfo[i].shopName);
          shopSaleRankNumArr.push(resJson.shopSaleRankInfo[i].saleNum);
      }

      shopSaleRankEcharts = {
        yAxis: {
            data: shopSaleRankTitleArr.reverse()
        },
        series: [{
            data: shopSaleRankNumArr.reverse(),
            itemStyle: {normal:{label:{formatter: '{c}辆'}}}
        }]
      }

      var priceRankTitleArr = [];
      var priceRankNumArr = [];
      for (var i = 0; i < resJson.priceRankInfo.length; i++) {
          priceRankTitleArr.push(resJson.priceRankInfo[i].priceRemark);
          priceRankNumArr.push(resJson.priceRankInfo[i].saleNum);
      }

      priceRankEcharts = {
        yAxis: {
            data: priceRankTitleArr.reverse()
        },
        series: [{
            data: priceRankNumArr.reverse(),
            itemStyle: {normal:{label:{formatter: '{c}辆'}}}
        }]
      }

    }
  });
  $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl + "/controller/statis/getCarStorageOutline",  // yii 控制器/方法
      cache: false,      
      data: {'marketId': marketId},  //传送的数据
      error:function(){
         // alert("数据传输错误");
      },success: function (data) {
         if (data.code != 1) {
            return false
         }
         console.log(data);
        var resJson =  data.result;
        var barArr = resJson.todayMarketStorageInfo;

        var barTitleArr = [];
        var barNumArr = [];


        for (var i = 0; i < barArr.length; i++) {
          barTitleArr.push(barArr[i].marketShortName);
          barNumArr.push(barArr[i].storageNum);
        }

        todayMarketStorageEcharts = {
          yAxis: {
              data: barTitleArr.reverse()
          },
          series: [{
              data: barNumArr.reverse()
          }]
        }
        rankEcharts.setOption(todayMarketStorageEcharts);

      }
    });
    autoAjax();
    setInterval(function(){
        autoAjax();
    },60000)
}
initBrand();
var rankNum = 0;

$('.nav-list').click(function(){
  rankNum = $(this).index();
  setRank(rankNum)
});
var rankTime = setInterval(function(){
  rankNum++;
  console.log(rankNum)
  if (rankNum==5) {
    rankNum = 0;
  };
  setRank(rankNum);
},20000);
function setRank(num){
  $('.nav-list').removeClass('on');
  $('.nav-list').eq(num).addClass('on');
  clearInterval(rankTime);
  rankTime = setInterval(function(){
    rankNum++;
    console.log(rankNum)
    if (rankNum==5) {
      rankNum = 0;
    };
    setRank(rankNum);
  },20000);
  if (num == 0) {
    rankEcharts.setOption(todayMarketStorageEcharts);
  }else if(num == 1) {
    rankEcharts.setOption(brandRankEcharts)
  }
  // else if(num == 2){
  //   rankEcharts.setOption(colorRankEcharts)
  // }
  // else if(num == 2){
  //   rankEcharts.setOption(modelRankEcharts)
  // }
  else if(num == 2){
    rankEcharts.setOption(salesVolumeRankEcharts)
  }else if(num == 3){
    rankEcharts.setOption(shopSaleRankEcharts)
  }else if(num == 4){
    rankEcharts.setOption(priceRankEcharts)
  }
}
function autoAjax(){
  // $.ajax({
  //   type: "get",      //data 传送数据类型。post 传递
  //   dataType: 'json',  // 返回数据的数据类型json
  //   url: defaultUrl + "/controller/statis/getOutline",  // yii 控制器/方法
  //   cache: false,      
  //   data: {'marketId': marketId,'userId':userId},  //传送的数据
  //   error:function(){
  //      // alert("数据传输错误");
  //   },success: function (data) {
  //      console.log(data);
  //      if (data.code != 1) {
  //         return false
  //      }
  //     var resJson =  data.result;
  //     $('.pick1 .num').html(resJson.todaySaleInfo.saleNum+'<span>台</span>');
  //     $('.pick2 .num').html(resJson.thisMonthSaleInfo.saleNum+'<span>台</span>');
  //     $('.pick0 .num').html((resJson.saleInfo.saleNum || 0 )+'<span>台</span>');
  //   }
  // });
    
    
    //老崔的接口
    
    //响应json {"code":"success","monthInStockCount":0,"todayInStockCount":0}
    
    
    $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl + "/controller/statis/getCarStorageOutline",  // yii 控制器/方法
      cache: false,      
      data: {'marketId': marketId},  //传送的数据
      error:function(){
         // alert("数据传输错误");
      },success: function (data) {
         if (data.code != 1) {
            return false
         }
         console.log(data);
        var resJson =  data.result;
        $('.pick3 .num').html(resJson.todayStorageInfo.storageNum+'<span>台</span>');
        $('.pick4 .num').html(resJson.thisMonthStorageInfo.storageNum+'<span>台</span>');
        $('.pick5 .num').html(resJson.totalStorageInfo.storageNum+'<span>台</span>');

        var pieArr = resJson.marketStorageInfo;
        var barArr = resJson.todayMarketStorageInfo;

        var barTitleArr = [];
        var barNumArr = [];
        var outArr = [];
        for (var i = 0; i < pieArr.length; i++) {
          outArr.push({value:pieArr[i].storageNum,name:pieArr[i].marketShortName+':'+pieArr[i].storageNum+'辆'})
        }

        for (var i = 0; i < barArr.length; i++) {
          barTitleArr.push(barArr[i].marketShortName);
          barNumArr.push(barArr[i].storageNum);
        }

        todayMarketStorageEcharts = {
          yAxis: {
              data: barTitleArr.reverse()
          },
          series: [{
              data: barNumArr.reverse(),
              itemStyle: {normal:{label:{formatter: '{c}辆'}}}
          }]
        }
        // rankEcharts.setOption(todayMarketStorageEcharts);
        // $('.nav-list').removeClass('on');
        // $('.nav-list').eq(0).addClass('on');



        myZhu1.setOption({
            series: [{
                // 根据名字对应到相应的系列
                data:outArr
            }]
        });

      }
    });

    $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl + "/controller/statis/getOutline",  // yii 控制器/方法
      cache: false,      
      data: {'marketId': marketId},  //传送的数据
      error:function(){
         // alert("数据传输错误");
      },success: function (data) {
         console.log(data);
         if (data.code != 1) {
            return false
         }
        var resJson =  data.result;

        $('.pick1 .num').html(resJson.todaySaleInfo.saleNum+'<span>台</span>');
      $('.pick2 .num').html(resJson.thisMonthSaleInfo.saleNum+'<span>台</span>');
      $('.pick0 .num').html((resJson.saleInfo.saleNum || 0 )+'<span>台</span>');
      

        var marketArr = resJson.marketSaleInfo;
        var textData = [];
        var numData = [];
        
        for (var i = 0; i < marketArr.length; i++) {
          textData.push(marketArr[i].marketShortName)
          numData.push(marketArr[i].saleNum)
        }

        myZhu.setOption({
            xAxis: {
                data: textData.reverse()
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '成交量',
                data: numData.reverse()
            }]
        });

        

      }
    });
}


































